<template>
  <div ref="container" style="height: 100%; width: 100%"></div>
  <div class="pie-title">
    <div class="text">信用分分布</div>
  </div>
  <div class="pie-title p2">
    <div class="text">年龄分布</div>
  </div>
  <div class="pie-title p3">
    <div class="text">性别分布</div>
  </div>
  <div class="pie-title p4">
    <div class="text">工作类型分布</div>
  </div>
</template>

<script setup lang="ts">
import type { UserPersona } from '~/types';
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Object as PropType<UserPersona>,
    required: true
  }
});

const container = ref(null);
let myChart: any;

function initChart(data: UserPersona) {
  if (!myChart) {
    myChart = echarts.init(container.value);
  }
  const seriesData = {
    type: 'pie',
    radius: ['20%', '30%'],
    // avoidLabelOverlap: false,
    selectedMode: 'single',
    select: {
      label: {
        show: true
      },
      labelLine: {
        show: true
      },
      itemStyle: {}
    },
    itemStyle: {
      // borderRadius: 10,
      // borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: false,
      color: '#fff',
      textBorderColor: 'none'
    },
    labelLine: {
      show: false
    }
  };
  const series: any = [];
  // const list = ['gradeSerializer', 'ageSerializer', 'genderSerializer', 'jobSerializer'];

  series.push(
    Object.assign({}, seriesData, {
      name: '信用分分布',
      center: ['25%', '20%'],
      selectedMode: 'single',
      data: data.countySerializer.map((d, i) => ({ name: d.interval, value: d.number, selected: i == 0 }))
    })
  );
  series.push(
    Object.assign({}, seriesData, {
      name: '年龄分布',
      center: ['75%', '20%'],
      selectedMode: 'single',
      data: data.ageSerializer.map((d, i) => ({ name: d.interval, value: d.number, selected: i == 0 }))
    })
  );
  series.push(
    Object.assign({}, seriesData, {
      name: '性别分布',
      center: ['25%', '80%'],
      selectedMode: 'single',
      data: data.genderSerializer.map((d, i) => ({ name: d.gender, value: d.number, selected: i == 0 }))
    })
  );
  series.push(
    Object.assign({}, seriesData, {
      name: '工作类型分布',
      center: ['75%', '80%'],
      selectedMode: 'single',
      data: data.jobSerializer.map((d, i) => ({ name: d.jobType, value: d.number, selected: i == 0 }))
    })
  );
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series
  };
  myChart.setOption(option);
}

watch(
  () => props.data,
  (val) => {
    if (val) {
      initChart(val);
    }
  }
);

onMounted(() => {
  if (props.data) {
    initChart(props.data);
  }
});
</script>

<style lang="scss" scoped>
.pie-title {
  position: absolute;
  left: calc(25% - 34px);
  top: calc(20% - 34px);
  border-radius: 50%;
  color: #19ecff;
  background-color: #007fff;
  height: 68px;
  width: 68px;
  display: flex;
  align-items: center;
  justify-content: center;

  .text {
    height: 66px;
    width: 68px;
    border-radius: 50%;
    background-color: #010952;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 12px;
  }

  &.p2 {
    left: calc(75% - 34px);
    top: calc(20% - 34px);
  }
  &.p3 {
    left: calc(25% - 34px);
    top: calc(80% - 34px);
  }
  &.p4 {
    left: calc(75% - 34px);
    top: calc(80% - 34px);
  }
}
</style>
